<template>
  <section>
    <van-nav-bar title="聊天室"
                 fixed
                 placeholder
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"
                 safe-area-inset-top/>
  </section>

  <div class="chat-container" ref="chatContainer">
    <div v-if="recordStore.msgList.length === 0" class="empty-chat">
      暂无消息，开始聊天吧
    </div>
    <div v-for="(msg) in recordStore.msgList" :key="msg.msgId" class="message" :class="msg.type">
      <div class="message-avatar" v-if="msg.type == 'received'">
        <span>{{ msg.fromUser }}</span>
      </div>
      <div class="message-content">
        {{ msg.msg }}
        <div class="message-info">
          {{ msg.sendTime  }}
        </div>
      </div>
      <div class="message-avatar" v-if="msg.type == 'sent'">
        <span>{{ msg.fromUser }}</span>
      </div>
    </div>
  </div>
  <!-- 输入区域 -->
  <div class="input-area">
    <van-field
        v-model="inputMessage"
        placeholder="输入消息..."
        class="input-field"
        @keyup.enter="sendMessage"
    >
      <template #button>
        <van-button icon="plus" size="small" type="primary" @click="more" v-if="!inputMessage"/>
        <van-button
            v-if="inputMessage"
            type="primary"
            size="small"
            @click="sendMessage"
        >
          发送
        </van-button>
      </template>

    </van-field>
  </div>


  <div >
    <van-popup
        v-model:show="showBottom"
        position="bottom"
        :style="{ height: '40%' }"
    >
      <van-row>
        <van-col span="6">
          <div style="text-align:center;">
            <van-icon  name="phone-circle-o" size="80" @click="joinVideo" />
          </div>

          <div style="text-align:center;"> 视频通话</div>
        </van-col>

      </van-row>

    </van-popup>
  </div>

</template>

<script setup>

 import {onMounted,ref,nextTick } from "vue";
 import {useRoute} from "vue-router";
 import msgRecordStore from "@/store/msgRecord";
 let chatContainer = ref();
 let route = useRoute();
 import {useRouter} from "vue-router";
 import initializeWebsocket from "@/plugins/initialize-websocket";
 import {findByFriendUserId} from "@/network/msgRecord";
 import {nowDate} from "@/util/dateUtil";
 const inputMessage = ref()
 const showBottom = ref()
 let router = useRouter();
 let recordStore = msgRecordStore();


 function sendMessage() {
   let msgData = {
     fromUserId:localStorage.getItem('userId'),
     fromUser:localStorage.getItem('userName'),
     targetId:route.query.friendId,
     target:route.query.friendUserName,
     msg:inputMessage.value,
     eventType:2,
     sendTime:nowDate(),
     targetType:'sys_user',
     type:'sent',
   }
   initializeWebsocket.send(JSON.stringify(msgData))
   inputMessage.value = ''
   recordStore.msgList.push(msgData);
   scroll()
 }

 function more() {
   showBottom.value = true
   console.log(inputMessage);
 }
 function joinVideo() {
   var calleePeerId = route.query.calleePeerId;
   console.log(calleePeerId);
   console.log("开始加入视频");
   router.push({
     path: "/video-call-calling-view",
     // path: "/chat-view",
     query: {
       calleePeerId
     }
   });
 }

 function onClickLeft() {
   history.back();
 }

 function scroll() {
   nextTick(() => {
     let scrollElem = chatContainer.value;
     console.log(scrollElem.scrollHeight);
     chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
   });
 }

 function mesRecord(friendUserId) {
   let param = {
     friendUserId: friendUserId
   }
   findByFriendUserId(param).then((res) => {
     recordStore.msgList = res.data;
   })
 }

 onMounted(() => {
   // 获取聊天记录
   recordStore.friendUserId = route.query.friendId
   recordStore.friendUserName = route.query.friendUserName
   mesRecord(recordStore.friendUserId)
   scroll()
 });

</script>

<style scoped lang="scss">

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  max-width: 500px;
  margin: 0 auto;
  height: 100vh;
  overflow: hidden;
}
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f0f0f0;
}
.chat-container {
  flex: 1;
  overflow: auto;
  height: 100vh;
  padding: 10px;
  background-color: #e5e5e5;
}
.message {
  display: flex;
  margin-bottom: 15px;
}
.message.received {
  justify-content: flex-start;
}
.message.sent {
  justify-content: flex-end;
}
.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 10px;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #666;
  overflow: hidden;
}
.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message-content {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 18px;
  position: relative;
}
.received .message-content {
  background-color: white;
  border-bottom-left-radius: 4px;
}
.sent .message-content {
  background-color: #1989fa;
  color: white;
  border-bottom-right-radius: 4px;
}
.message-info {
  font-size: 12px;
  margin-top: 5px;
  opacity: 0.8;
  display: flex;
  justify-content: flex-end;
}
.input-area {
  display: flex;
  padding: 10px;
  background-color: white;
  border-top: 1px solid #eee;
}
.input-field {
  flex: 1;
  margin-right: 10px;
}
.contacts-list {
  padding: 10px;
}
.contact-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
}
.contact-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 15px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #666;
}
.contact-info {
  flex: 1;
}
.contact-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 3px;
}
.last-message {
  font-size: 13px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.time {
  font-size: 12px;
  color: #999;
}
.unread-count {
  background-color: #f56c6c;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}
.nav-bar {
  background-color: #1989fa;
  color: white;
}
.empty-chat {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #999;
}
.tool {
  height: 300px
}
</style>
